<route lang="json5" type="page">
  {
  layout: 'default',
  style: {
  navigationStyle: 'custom',
  navigationBarTitleText: '工作台',
  },
  }
  </route>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  const tabbarName = ref('workHome')
  const navTitle = ref('工作台')
  const navLeftArrow = ref(false)
  const navLeftText = ref('')
  const dataSetIndex = ref(0) // 用于跟踪当前数据集
  
  // 定义两个不同的数据集
  const dataSets = [
    {
      series: [
        {
          name: '热度',
          data: [300, 270, 340, 344, 300, 320, 310],
        },
        {
          name: '正面',
          data: [120, 102, 141, 174, 190, 250, 220]
        },
        {
          name: '负面',
          data: [-20, -32, -21, -34, -90, -130, -110]
        }
      ]
    },
    {
      series: [
        {
          name: '热度',
          data: [280, 290, 320, 300, 310, 330, 340],
        },
        {
          name: '正面',
          data: [150, 120, 160, 140, 170, 200, 180]
        },
        {
          name: '负面',
          data: [-30, -40, -25, -35, -50, -70, -60]
        }
      ]
    }
  ]
  
  // 切换数据函数
  const toggleData = () => {
    dataSetIndex.value = (dataSetIndex.value + 1) % dataSets.length
  }
  
  // 使用计算属性定义图表配置
  const chartOptions = computed(() => {
    const currentDataSet = dataSets[dataSetIndex.value]
    
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' 
        },
        confine: true
      },
      legend: {
        data: ['热度', '正面', '负面']
      },
      grid: {
        left: 20,
        right: 20,
        bottom: 15,
        top: 40,
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#999999'
            }
          },
          axisLabel: {
            color: '#666666'
          }
        }
      ],
      yAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
          axisLine: {
            lineStyle: {
              color: '#999999'
            }
          },
          axisLabel: {
            color: '#666666'
          }
        }
      ],
      series: [
        {
          name: currentDataSet.series[0].name,
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'inside'
            }
          },
          data: currentDataSet.series[0].data,
        },
        {
          name: currentDataSet.series[1].name,
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true
            }
          },
          data: currentDataSet.series[1].data
        },
        {
          name: currentDataSet.series[2].name,
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'left'
            }
          },
          data: currentDataSet.series[2].data
        }
      ]
    }
  })
  </script>
  
  <template>
    <view>
      <page-layout :tabbar-name="tabbarName" :nav-title="navTitle" :nav-left-arrow="navLeftArrow" :nav-left-text="navLeftText">
        <view>
          <page-charts ref="chartRef" :options="chartOptions" height="750rpx"></page-charts>
          <view class="btn-container">
            <button @click="toggleData" class="toggle-btn">切换数据</button>
          </view>
        </view>
      </page-layout>
    </view>
  </template>
  
  <style scoped lang="scss">
  .btn-container {
    padding: 20rpx;
    display: flex;
    justify-content: center;
  }
  
  .toggle-btn {
    background-color: #007aff;
    color: white;
    border-radius: 10rpx;
    padding: 15rpx 30rpx;
    font-size: 28rpx;
    
    &:active {
      opacity: 0.7;
    }
  }
  </style>